<template>
  <div id="susBtn">
    <div
      :style="{top:stylesBtn.shifting+'px'}"
      v-show="stylesBtn.status!=0"
      @click.stop="getGroup(-2,'susBtn')"
      :class="[stylesBtn.type=='left'?'xuanfu-left':'xuanfu-right','xuanfu',currentId==-2?'xuanfu-choose':'']">
      <div class="xuanfu-pic" v-for="(v,i) in stylesBtn.imgUrl" :key="i">
        <el-image style="width: 40px; height: 40px" :src="v.img==''?img:v.img" fit="cover"></el-image>
      </div>
      <div class="single-xuanfu">
        <el-popover v-show="currentId==-2" placement="right" width="200" v-model="visible">
          <p>确定删除此组件吗？</p>
          <div style="text-align: right; margin: 10px 0 0">
            <el-button plain size="mini" @click="visible = false">取消</el-button>
            <el-button type="primary" size="mini" @click.stop="deleteSingle(-2)">确定</el-button>
          </div>
          <el-button type="danger" size="mini" slot="reference">删除</el-button>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "susBtn",
  data() {
    return {
      img: require("../../../assets/img/xuanfu.png"),
      visible: false,
    };
  },
  computed: {
    ...mapState(["susBtn", "currentId", "currentName", "list"]),
    stylesBtn() {
      return this.susBtn[0].styles;
    },
  },
  props: ["num"],
  created() {},
  methods: {
    ...mapMutations(["getList", "getCurrenChoose", "getCurrenChooseName"]),
    deleteSingle(num) {
      this.stylesBtn.status = 0;
      this.visible = false;
      if (this.list.length != 0) {
        this.getCurrenChoose(0);
        this.getCurrenChooseName(this.list[0].name + "Change");
      } else {
        this.getCurrenChoose(0);
        this.getCurrenChooseName(" ");
      }
    },
    getGroup(i, name) {
      this.getCurrenChoose(i);
      this.getCurrenChooseName(name + "Change");
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../assets/css/base.less");

//悬浮
.xuanfu-choose {
  // border: 1px solid @mainColor !important;暂时注释
}
.xuanfu {
  position: absolute;
  top: 0;
  padding: 10px;
  z-index: 2000;
  border: 1px solid rgba(0, 0, 0, 0);
  > .xuanfu-pic {
    // background-color: #fff;
    // border-radius: 50%;
    // padding: 10px;
    // margin-bottom: 10px;
    // border: 1px solid #999;暂时注释
  }
  > .single-xuanfu {
    position: absolute;
    right: -65px;
    top: 0;
  }
}
.xuanfu-left {
  left: 0;
}
.xuanfu-right {
  right: 0;
}
</style>
